<template>
	<view class="">
		<view class="basic-info">
			<view class="top bg">
				<view class="one boder-bottom df">
					<view class="left">
						操作票编码
					</view>
					<view class="right">
						{{data.otNo}}
						
					</view>
				</view>
				<view class="two boder-bottom df">
					<view class="left">
						操作票类型
					</view>
					<view class="right">
						{{data.otTypeName}}
					</view>
				</view>
				<view class="three df">
					<view class="left">
						状态
					</view>
					<view class="right">
						{{stateInfo[data.state?data.state:1]}}
					</view>
				</view>
			</view>
			<view class="center bg">
				<view class="one boder-bottom df">
					<view class="left">
						操作人
					</view>
					<view class="right">
						{{data.operator1Name}}
					</view>
				</view>
				<view class="two boder-bottom df">
					<view class="left">
						监护人
					</view>
					<view class="right">
						{{data.guarder1Name}}
					</view>
				</view>
				<view class="three-task">
					<view class="left">
						操作任务
					</view>
					<view class="right">
						{{data.opContent}}
					</view>
				</view>
			</view>
			<view class="bottom bg">
				<view class="one boder-bottom df">
					<view class="left">
						设备位置
					</view>
					<view class="right">
						{{data.locaNo}}
					</view>
				</view>
				<view class="two  df">
					<view class="left">
						场站
					</view>
					<view class="right">
						{{data.locaName}}
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getTicketDetail
	} from '@/api/operationPicket.js'
	export default {
		data() {
			return {
				stateInfo: {
					1:'拟定',
					2:'审核中',
					3:'已作废',
					4:'待执行',
					5:'执行中',
					6:'已执行',
					7:'终止执行',
					8:'关闭（合格）',
					9:'关闭（不合格）'
				},
				data: {}
			}
		},
		props:{
			otId:{
			   type:String
			}
		},
		components: {},
		mounted() {
			this.queryTicketDetail()
		},
		methods: {
		   /**
		    * 操作票基本信息
		    **/
		   queryTicketDetail() {
		   	getTicketDetail({
		   		otId: this.otId
		   	}).then(res => {
		   		this.data = res.result.result
		   	})
		   },
	  
		}
	}
</script>

<style lang="scss">
	.botton-btn-st{
		position: fixed;
		bottom: 20upx;
		width: 96%;
		left: 2%;		
	}
	.basic-info {
		.bg {
			background-color: #fff;
		}

		.boder-bottom {
			border-bottom: 1px solid #eee;
		}

		.df {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.top {
			padding: 15upx;
			font-size: 25upx;

			.right {
				color: #999;
			}

			&>.df {
				padding: 25upx;
			}
		}

		.bottom {
			padding: 15upx;
			font-size: 25upx;
			margin-top: 20upx;

			.right {
				color: #999;
			}

			&>.df {
				padding: 25upx;
			}
		}

		.center {
			padding: 15upx;
			font-size: 25upx;
			margin-top: 20upx;

			.right {
				color: #999;
			}

			&>.df {
				padding: 25upx;
			}

			.three-task {
				padding: 25upx;

				.right {
					margin-top: 10upx;
				}
			}
		}
	}
</style>
